<template>
    <div class="app-container">
        <!-- 数据列表 -->
        <div class="list">
            <el-card>
                <div class="list-card">
                    <div class="data">
                        <el-icon :size="16">
                            <Tickets />
                        </el-icon>
                        <span>数据列表</span>
                    </div>
                    <el-button @click="addFn">添加</el-button>
                </div>
            </el-card>
        </div>
        <!-- 属性分类列表 -->
        <div class="table">
            <el-table :data="tabList" style="width: 100%">
                <el-table-column prop="id" label="编号" width="60px" />
                <el-table-column prop="name" label="类型名称" />
                <el-table-column prop="attributeCount" label="属性数量" />
                <el-table-column prop="paramCount" label="参数数量" />
                <el-table-column label="设置">
                    <template #default="{ row }">
                        <el-button @click="attributeClick(row)">属性列表</el-button>
                        <el-button @click="paramsClick(row)">参数列表</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="{ row }">
                        <el-button size="small" @click="EditFn(row.id)">编辑</el-button>
                        <el-button type="danger" size="small" @click="productAttrDelete(row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页器 -->
        <div class="pagination">
            <el-pagination v-model:current-page="paginationParams.currentPage" v-model:page-size="paginationParams.pageSize"
                :page-sizes="[5, 10, 15]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <!-- 类型分类 -->
        <AttrButeEdit :title="title" :dialogFormVisible="dialogFormVisible" :id="typeId" @cancel="cancelFn"
            @confirm="confirmFn">
        </AttrButeEdit>
    </div>
</template>

<script setup lang="ts">
import umsTable from '@/hooks/umsTable';
import { Tickets } from '@element-plus/icons-vue'
import * as http from '@/request/http'
import { ElMessage, ElMessageBox } from 'element-plus';
import AttrButeEdit from './components/AttributeEdit.vue'
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
//跳转属性列表
const attributeClick = (row: IProductAttr) => {
    router.push(`productAttrList?cid=${row.id}&cname=${row.name}&type=0`)
}
//跳转参数列表
const paramsClick = (row: IProductAttr) => {
    router.push(`productAttrList?cid=${row.id}&cname=${row.name}&type=1`)
}

//属性分类id
const typeId = ref(0)
//控制类型分类打开关闭
const dialogFormVisible = ref(false)

//属性分类标题
const title = ref('添加')
//添加属性分类
const addFn = () => {
    typeId.value = 0
    title.value = '添加'
    dialogFormVisible.value = true
}

//编辑属性分类
const EditFn = (id: number) => {
    typeId.value = id
    title.value = '编辑'
    dialogFormVisible.value = true
}
//类型分类弹窗显示
const cancelFn = () => {
    typeId.value = 0
    dialogFormVisible.value = false
}
const confirmFn = () => {
    dialogFormVisible.value = false
    getAdminList()
}


//属性分类列表table
const { paginationParams, tabList, handleCurrentChange, handleSizeChange, getAdminList } = umsTable(http.productAttr.productAttrList, {})

//删除单个属性分类
const productAttrDelete = (id: number) => {
    ElMessageBox.confirm(
        '是否要删除该品牌',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            http.productAttr.productAttrDeleteId(id).then(_res => {
                ElMessage.success('删除成功')
                getAdminList()
            })
        })

}
</script>

<style scoped lang="less">
.list {
    margin-top: 30px;

    .list-card {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .data {
            display: flex;
            align-items: center;
            font-size: 14px;

            .el-icon {
                padding-right: 10px;
            }
        }
    }
}

:deep(.table) {
    margin-top: 20px;

    .el-table {
        border: 1px solid #ebeef5;

    }

    .el-table__cell {
        border-right: 1px solid #ebeef5;
        color: #909399;
        font-size: 13px;
    }

    th {
        color: #909399;
        font-size: 13px;
    }

    .cell {
        text-align: center;
    }
}

.pagination {
    width: 100%;
    margin-top: 20px;

    .el-pagination {
        float: right;
    }
}
</style>